<template>
 <section>
<!--   左-->
   <div class="goodsClassLeft">
     <div v-if="isLoading" class="isLoading">
       <Loading></Loading>
     </div>
     <div class="goodsClass" v-else>
       <router-link tag="div" to="/index/classify" class="goodsClassBox">
         <img src="../../assets/images/all.png" alt="" class="circle1 animate__animated animate__swing">
         <p>全部分类</p>
       </router-link>
       <router-link tag="div" :to="{path:'/index/classify',query:{id:item.categoryId}}"  class="goodsClassBox" v-for="(item,index) in list" :key="item.name">
         <img class="circle1 animate__animated animate__bounce"  :src="imgList[index]" alt="">
         <p>{{item.name}}</p>
       </router-link>
     </div>
   </div>
<!--   </div>-->
 </section>

</template>

<script>
import {goodsClassify} from "@/api/api";
import food from '../../assets/images/food.png';
import drink from '../../assets/images/drinks.png';
import pen from '../../assets/images/pen.png';
import clothes from '../../assets/images/clothes.png';
import book from '../../assets/images/two.png';
import electronic from '../../assets/images/other.png';
import commodity from '../../assets/images/day.png';
import shoe from '../../assets/images/shoe.png';
import animal from '../../assets/images/cat.png';
import Loading from "@/components/Index/Loading";

export default {
  name: "Class",
  components:{
    Loading,
  },
  data(){
    return{
      //加载中
      isLoading:true,
    //  分类
      list:[],
      imgList:[
          food,
          drink,
          pen,
          clothes,
          book,
          electronic,
          commodity,
          shoe,
          animal,
      ]
    }
  },
  created() {
    //分类
    goodsClassify().then(res=>{
      // console.log(res)
      if(res.data.code==0){
        this.list = res.data.rows
      //  加载中
        this.isLoading = false
      }
    })
  }

}
</script>

<style lang="less" scoped>
  *{
    padding: 0;
    margin: 0;
  }
  section{
    display: flex;
    justify-content: space-around;
    margin-top: 60px;
    padding-top: 20px;
    .goodsClassLeft{
      width: 88%;
      margin-top: 20px;
      .isLoading{
        margin: 20px 0;
      }
      .goodsClass{
        margin: 10px 0;
        //padding-left: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        border-radius: 15px;
        border: 1px solid #ddd;
        box-shadow: 2px 2px 3px #dddddd;
        padding: 10px 5px;
        .goodsClassBox{
          padding-top: 5px;
          width: 20%;
          text-align: center;
          >p{
            font-size: 14px;
          }
          .circle1{
            width:35px;
            height: 35px;
          }
        }
      }
    }
  }
</style>